<!-- template专门用于写结构，最终不进行渲染 -->
<template>
    <div>
        <h3>App组件</h3>
        <p>{{ num }}</p>
        <button @click="fn"></button>
        ---------------
        <school></school>
        ---------------
        <Student />
    </div>
</template>


<!-- 专门用于声明js，需要把配置导出去 -->
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
    data() {
        return {
            num: 100
        }
    },
    // 挂载引入的子组件
    compoents: {
        School,
        Student
    },
    methods: {
        fn() {
            this.num++
        }
    }
}
</script>


<!-- 专门写样式的地方 -->
<style>
    h3 {
        color: red;
    }
</style>